<template>
  <div class="home">
    <div>
      <h2>computed测试结果:</h2>
      <ul class="test">
        <li v-for="item in listData" :key="item.a">
          <div>{{ item.a }}的第{{ item.b }}位是{{ wei(item.a,item.b) }}</div>
          <p :class="wei(item.a,item.b) ? 's1' : 's2'">computed: 测试v-if绑定</p>
        </li>
      </ul>
    </div>
    <div style="marginLeft:100px">
      <h2>filters测试结果:</h2>
      <ul class="test">
        <li v-for="item in listData" :key="item.a">
          <div>{{ item.a }}的第{{ item.b }}位是{{ item|capitalize }}</div>
          <p :class="item | capitalize ">computed: 测试v-if绑定</p>
        </li>
      </ul>
    </div>
    <div style="marginLeft:100px">
      <h2>methods测试结果:</h2>
      <ul class="test">
        <li v-for="item in listData" :key="item.a">
          <div>{{ item.a }}的第{{ item.b }}位是{{ weiInt(item.a,item.b) }}</div>
          <p :class="weiInt(item.a,item.b) ? 's1' : 's2' ">computed: 测试v-if绑定</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { weiInt } from "../../utils/Methods";
export default {
  filters: {
    capitalize(value) {
      let data = value.a.toString(2).split("").reverse()[value.b];
      if (Number(data)) {
        // console.log(typeof data);
        return "s1";
      } else {
        return "s2";
      }
    },
  },
  // 过滤器

  data() {
    return {
      listData: [],
      num: 20,
    };
  },
  // 计算属性
  computed: {
    wei() {
      return function (arr, i) {
        let data = arr.toString(2).split("").reverse()[i];
        if (data) {
          // console.log(typeof data);
          return Boolean(Number(data));
        } else {
          return false;
        }
      };
    },
  },
  created() {
    this.getData();
  },
  methods: {
    weiInt,
    getData() {
      for (let i = 0; i < 10; i++) {
        this.listData.push({ a: i, b: i - 1 });
      }
    },
    shuiji() {
      this.num += 20;
      this.listData = [];
      for (let i = this.num; i < this.num + 10; i++) {
        this.listData.push({ a: i, b: i - 1 });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.test {
  li {
    margin-top: 20px;
  }
}
.s1 {
  background-color: rgb(0, 128, 0);
}
.s2 {
}
</style>